<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>社交地图</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=VhkT6V7yA3ieLfrjtN57hroWRgqIx9vO"></script>
    <script src="../lib/jquery-3.3.1.min.js"></script>
    <script src="../lib/thingjs.min-v1.2.2.4.js"></script>
    <script src="../lib/jquery.min.js"></script>
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
    <script src="../lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <!--引入弹窗层-->
    <script src="../layer/layer.js"></script>

    <style>
        body {
            margin:0;
            padding: 0;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
<div style="position:absolute;z-index: 99;margin-top: 20px;margin-left: 80%">
    <button class="button" onclick="setPlace()">设置位置</button>
    <button  class="button" th:onclick="'savePlace('+${preSetPlaceId}+')'">保存</button>

</div>
<!--地图展示-->
<div style="width:1910px;height:970px;border:1px solid gray;z-index: -1" id="container">

</div>

<!--<div class="test" th:text="${list}"></div>-->
<!--request:${list}<br/>-->
<!--<c:forEach items="${list}"var="u">-->
<!--${u.sName}<br/>-->
<!--</c:forEach>-->

<!-- <div style="width:800px;height:1000px;border:1px solid gray" id="info"></div> -->
<!--<p id="info"></p>-->



</body>
<script type="text/javascript">


    //创建地图
    var map = new BMap.Map("container");

    //启用滚轮缩放
    map.enableScrollWheelZoom(true);



    // marker.addEventListener("click",getAttr);
    // function getAttr(){
    //     var p = marker.getPosition();       //获取marker的位置
    //     alert("marker的位置是" + p.lng + "," + p.lat);
    // }


    // //设置中心点，缩放级别
    map.centerAndZoom( new BMap.Point(116.54779,39.812390), 9);

    setTimeout(function(){
        map.setZoom(12);
    }, 2000);//2秒后放大到14级

    // //单击获取点击的经纬度
    // map.addEventListener("click",function(e){
    //     alert(e.point.lng + "," + e.point.lat);
    // });


    // var marker = new Array(); //存放标注点对象的数组

    var sLng,sLat,marker;//设置全局变量存储经纬度
    //单击获取点击的经纬度
    map.addEventListener("click",function(e){
        if(marker != null){
            map.clearOverlays();
        }
        sLng = e.point.lng;
        sLat = e.point.lat;
        // alert(sLng + "," + sLat);
    });

    <!--给设置位置button绑定事件-->
    function setPlace(){
        var point = new BMap.Point(sLng,sLat);
        // marker[index] = new BMap.Marker(point);  // 创建标注
        marker = new BMap.Marker(point);
        map.addOverlay(marker);              // 将标注添加到地图中
        map.centerAndZoom(new BMap.Point(sLng+0.114,sLat-0.028), 13);

    }

    function savePlace(id){

        $.ajax({
                url: "/savePlace",
                data:{"sLng":sLng,"sLat":sLat,"sId":id},
                dataType: "json",   //返回的数据是json 格式
                type: "GET",
                success: function (data) {
                    if(data == 1){
                        alert("位置设置成功");
                        window.parent.location.reload();
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                    }
                }
        })
    }


</script>


</html>

